<template>
    <div class="address-manage-main" :style="UserAddressList.length==0?'background-color: #fff;':'background-color: #f8f8f8;'">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">地址管理</span>
            </template>
        </van-nav-bar>
        <img class="defaultpage" src="../../assets/defaultpage/address.png" v-if="UserAddressList.length==0" alt="">
        <div :class="['address-item-base',item.is_top==0?'font-color-999':'font-color-333']" v-for="(item,index) in UserAddressList" >
            <div class="address-item-detail">
                <span>{{item.user_name}}</span><span class="phone-number">{{item.phone}}</span>
                <p>{{item.sheng}} {{item.shi}} {{item.qu}}</p>
                <p>{{item.address}}</p>
            </div>
            <div class="address-item-tool-bar">
                <span>设为默认地址</span>
                <van-icon name="checked" size="18px" :color="item.is_top==0?'#ccc':'#f26e6e'" @click="SetDefault(item)"/>
                <div class="address-item-btn" @click="del(item)">
                    <img :src="addressIsDefult?OutIcon:defaultOutIcon" alt="删除">
                    <span>删除</span>
                </div>
                <div class="address-item-btn" @click="edit(item)">
                    <img :src="addressIsDefult?EditIcon:defaultEditIcon" alt="编辑">
                    <span>编辑</span>
                </div>
            </div>
        </div>

        <img src="../../assets/img/add-address.png" @click="JumpToAdd" class="addbtn" alt="">
    </div>
</template>
<script>
import {_ajaxaddressList,_deleteAddress,_is_top} from '../../service/address.js'
export default {
    data(){
        return{
            addressIsDefult:true,

            backicon:require('../../assets/img/backicon.png'),
            defaultEditIcon:require('../../assets/img/address-manage-edit-333.png'),
            defaultOutIcon:require('../../assets/img/address-manage-bin-333.png'),
            EditIcon:require('../../assets/img/address-manage-edit-ccc.png'),
            OutIcon:require('../../assets/img/address-manage-bin-ccc.png'),

            UserAddressList:[],
        }
    },
    mounted(){
        if(localStorage.getItem('user')==null||localStorage.getItem('user')==undefined){
            this.$router.push("/login")
            return
        }
        this.getUserAddress()
        console.log(this.$router.currentRoute)
    },
    methods:{
        onClickLeft(){
            // this.$router.push('/indexs')

            console.log(localStorage.getItem("Address"))
            if(localStorage.getItem("Address")!=null&&localStorage.getItem("Address")!=undefined){
                let addstr=localStorage.getItem("Address")
                // localStorage.removeItem("Address")
                this.$router.push(addstr)
            }else{
                this.$router.push("/indexs")
            }
            
        },
        JumpToAdd(){
            if(this.UserAddressList.length>=3){
                this.$toast("您只能创建三个地址")
                return
            }
            this.$router.push('/editaddress')
        },
        getUserAddress(){
            let _this=this
            if(!localStorage.getItem('user')){
                this.$router.push('/login')
            }
            let uid=JSON.parse(localStorage.getItem('user')).user_id 
            _ajaxaddressList(uid).then(res=>{
                console.log(res)
                _this.UserAddressList=[]
                _this.UserAddressList=[].concat(...res.data)
            })
        },
        del(info){
            let _this=this
            this.$dialog.confirm({
                title: '提示',
                message: '是否删除当前地址',
                overlayClass:'markbg',
                className:'logbase',
                getContainer:'.address-manage-main'
            })
            .then(() => {
                _this.$toast.loading({
                    duration: 0, // 持续展示 toast
                    forbidClick: true,
                })
                _deleteAddress(info.address_id).then(res=>{
                    setTimeout(()=>{
                        _this.$toast.clear()
                        _this.$toast(res.message)
                        _this.getUserAddress()
                    },1000)
                })
            })
            .catch(() => {
                // on cancel
            });
        },
        async SetDefault(item){
            let _this=this
            this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
            })
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            await _is_top(item.address_id,uid).then(res=>{
                setTimeout(()=>{
                    _this.$toast.clear()
                    _this.$toast(res.message)
                    _this.getUserAddress()
                },1000)
            })
            
        },
        edit(item){
            this.$router.push({path:'/editaddress',query: {id:item.address_id}})
        },
        getContainer() {
            return document.querySelector('.address-manage-main');
        }
    }
}
</script>
<style lang="less" scoped>
.address-manage-main{
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    
    .van-nav-bar{
        .van-nav-bar__left{
            .van-icon__image{
                width: 8px;
            }
        }
    }
    .hometitle{
        font-size: 18px;
        font-family: "PingFang SC","Microsoft YaHei";
        font-weight: bold;
        color: #000;
        line-height: 46px;
    }
    .defaultpage{
        width: 119px;
        position: absolute;
        top: 32%;
        left: 35%;
    }
    .address-item-base{
        width: 100%;
        height: 132px;
        margin-top: 13px;
        padding: 0 18px;
        background-color: #fff;
        box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
        .address-item-detail{
            width: 100%;
            height: 92px;
            border-bottom: 1px solid #efefef;
            span{
                display: inline-block;
                font-family: "PingFang SC","Microsoft YaHei";
                font-weight: 800;
                font-size: 16px;
                line-height: 40px;
                margin-bottom: 5px;
            }
            .phone-number{
                font-family: "DINPro-Bold";
                float: right;
            }
            p{
                margin-bottom: 0;
                font-size: 13px;
            }
        }
        .address-item-tool-bar{
            height: 40px;
            line-height: 40px;
            span{
                font-family: "PingFang SC","Microsoft YaHei";
                font-size: 13px;
                color: #333;
            }
            .van-icon{
                margin-left: 8px;
                vertical-align: middle;
            }
            .address-item-btn{
                float: right;
                margin-left: 19px;
                display: inline-block;
                img{
                    width: 12px;
                    margin-right: 13px;
                    vertical-align: middle;
                }
                span{
                    font-family: "PingFang SC","Microsoft YaHei";
                    font-size: 13px;
                    vertical-align: middle;
                }
            }
        }
    }
    .addbtn{
        width: 340px;
        position: absolute;
        bottom: 46px;
        left: 17px;
        right: 17px;
    }
    @media (max-height: 670px){
       .addbtn{
            width: 340px;
            position: absolute;
            bottom: 5px;
            left: 17px;
            right: 17px;
        } 
    }
}

.font-color-333{
    color: #333;
}
.font-color-999{
    color: #999;
}


// /deep/.van-dialog{
//     background-color: rgba(50, 50, 51, 0.88);
//     /deep/.van-dialog__header{
//         background-color: rgba(50, 50, 51, 0.88);
//         color: #fff;
//     }
//     /deep/.van-dialog__message{
//         background-color: rgba(50, 50, 51, 0.88);
//         color: #fff;
//     }
//     /deep/.van-dialog__footer{
//         /deep/button{
//             background-color: rgba(50, 50, 51, 0.88);
//             color: #fff;
//         }
//     }
// }


.markbg{
    opacity: 0;
}
.logbase{
    background-color: rgba(0, 0, 0, .3);
    color: #fff;
}
</style>